<template>
	<view class="store-class">
		<uni-search-bar ref="searchBarRef" :focus="isFocus" placeholder="请输入门店名称" class="search-bar"
			v-model="selectForm.store_name" @cancel="cancelHandler" @confirm="search">
		</uni-search-bar>
		<view class="scroll-view-box">
			<scroll-view :scroll-top="0" scroll-y="true" class="scroll-view-class scroll-Y" @refresherrefresh="refresh"
				refresher-enabled :refresher-triggered="isRefresh">
				<view class="store-item flex-cn mar_t_20 " v-for="(item,index) in store_list" :key="index"
					@click="goStorePage(item.store_id)">
					<view class="logo-class">
						<image :src="item.shop_img" mode=""></image>
					</view>
					<view class="item-right flex-col-spr">
						<text class="name-class">{{item.store_name || ''}}</text>
						<view class="address-class flex-cn" v-if="item.address">
							<text class="iconfont icondiliweizhi"></text>
							<text>{{item.address}}</text>
						</view>
						<view class="flex-cn time-phone">
							<view class="mar_r_20">
								<text>营业时间:</text>
								<text v-for="(t,i) in item.business_time" :key="i" class="mar_r_10">{{t}}</text>
							</view>
							<view class="flex-cn" v-if="item.phone">
								<text>{{item.phone}}</text>
								<text class="iconfont icondianhua"></text>
							</view>
						</view>
						<view class="flex-spb-cn mar_t_10">
							<view class="flex-cn tag-class">
								<view class="tag" v-for="el in item.tag_list" :key="index">{{el.name}}</view>
							</view>
							<view class="distance">{{item.distance}}km</view>
						</view>
					</view>
				</view>
				<view class="flex-cn-cn touch-btm" v-if="store_list && store_list.length == 0">
					<view class="line"></view>
					<text class="mar_l_10 mar_r_10">暂无数据</text>
					<view class="line"></view>
				</view>
				<template v-else>
					<view class="flex-cn-cn touch-btm" v-if="loading">加载中...</view>
					<view class="flex-cn-cn touch-btm" v-if="!loading">
						<view class="line"></view>
						<text class="mar_l_10 mar_r_10">到底了</text>
						<view class="line"></view>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_list: null,
				loading: false,
				selectForm: {
					type: '',
					id: '',
					longitude: '',
					latitude: '',
					store_name: ''
				},
				isRefresh: false,
				isFocus: false,
			}
		},
		methods: {
			async getStoreList() {
				if (this.loading) return false;
				this.loading = true
				const {
					status,
					data
				} = await this.$request('MallPreview/Mini/getBindStoreList', this.selectForm, false)
				if (status == 1) {
					this.store_list = data
				}
				this.loading = false
			},
			async search(e) {
				uni.showLoading({
					title: '加载中',
					// #ifndef MP-ALIPAY
					mask: true,
					// #endif
				})
				this.selectForm.store_name = e.value
				this.loading = false
				await this.getStoreList()
				uni.hideLoading()
			},
			async cancelHandler(e) {
				this.$refs.searchBarRef.clear()
				this.selectForm.store_name = ''
				uni.showLoading({
					title: '加载中',
					// #ifdef MP-WEIXIN
					mask: true,
					// #endif
				})
				this.loading = false
				await this.getStoreList()
				uni.hideLoading()
			},
			// 跳转到门店
			goStorePage(id) {
				this.$store.begin_store_id = id;
				uni.navigateTo({
					url: '/pages/store/store'
				})
			},
			//下拉刷新
			async refresh() {
				uni.showLoading({
					title: '加载中',
					// #ifdef MP-WEIXIN
					mask: true,
					// #endif
				})
				this.isRefresh = true
				this.loading = false
				await this.getStoreList()
				this.isRefresh = false
				uni.hideLoading()
			}

		},
		async onLoad(options) {
			if (options) {
				this.selectForm.type = options.type
				if (options.type == 3) {
					this.isFocus = true
				}
				if (options.id) {
					this.selectForm.id = options.id
				}
				let locationRes = await uni.getLocation({
					// #ifdef MP-WEIXIN
					type: 'gcj02',
					// #endif
				})

				this.selectForm.latitude = locationRes[1].latitude
				this.selectForm.longitude = locationRes[1].longitude
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				await this.getStoreList()
				uni.hideLoading()	
			}
		},
	}
</script>

<style lang="less">
	.flex-cn-cn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-spb-cn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-cn {
		display: flex;
		align-items: center;
	}

	.flex-col-spr {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.store-class {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.search-bar {
			height: 104rpx;
		}

		.scroll-view-box {
			flex: 1;
			width: 100%;
			overflow: hidden;
		}

		.scroll-view-class {
			width: 100%;
			height: 100%;

			.touch-btm {
				margin: 20rpx 0;
				color: #ccc;
				font-size: 24rpx;

				.line {
					width: 40%;
					height: 1px;
					background-color: #ccc;
				}
			}

			.store-item {
				margin: 10rpx 20rpx;
				padding: 15rpx 30rpx;
				background-color: #f3f3f3;
				display: flex;

				.logo-class {
					min-width: 150rpx;
					width: 150rpx;
					height: 150rpx;
					border: 1rpx solid #ccc;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-right {
					width: calc(100% - 150rpx);

					.name-class {
						font-size: 32rpx;
						color: #333;
						font-weight: 700;
					}

					.address-class {
						color: #666;
						font-size: 24rpx;
						margin: 10rpx 0;
					}

					.time-phone {
						color: #666;
						font-size: 20rpx;
					}

					.tag-class {
						max-width: 400rpx;
						height: auto;
						flex-wrap: wrap;

						.tag {
							padding: 0 20rpx;
							border: 1px solid #FD375B;
							border-radius: 14rpx;
							margin-right: 10rpx;
							font-size: 20rpx;
							margin-bottom: 10rpx;
							color: #FD375B;
						}
					}

					.distance {
						font-size: 24rpx;
						color: #666;
					}

				}


			}

		}

	}
</style>
